<template>
  <div class="cart">
    <h1>购物车</h1>
    <hr />
    <!-- {{ cartList }} -->

    <div class="content-box">
      <el-checkbox
        label="全选"
        v-model="isCheckAll"
        name="type"
        @change="checkAll"
      ></el-checkbox>
      <div class="goods-box">
        <div class="goods-item" v-for="(el, idx) in cartList" :key="idx">
          <!-- 勾选的 绑定值, 必须是每个商品有一个独立的变量表示是否勾选; -->
          <el-checkbox
            label=""
            v-model="el.checked"
            name="type"
            @click="checkItem(idx)"
          ></el-checkbox>
          <div class="imgbox">
            <!-- 商品小图 -->
            <img :src="el.thumb" alt="" />
          </div>
          <div class="name">{{ el.name }}</div>
          <div class="numbox">
            <!-- @change=""  -->
            <!-- v-model="num" -->
            <el-input-number
              v-model="el.num"
              :min="1"
              label="数量"
              @change="changeNum(el.record_id, el.num)"
            ></el-input-number>
          </div>
          <div class="delbox">
            <i class="el-icon-delete" @click="del(el.record_id)"></i>
          </div>
        </div>
      </div>
      <div class="cart-info">
        <div class="total">总金额: {{ total }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getCart as getCartApi,
  delCartItem,
  updateCartItem,
} from "../api/index";
export default {
  data() {
    return {
      cartList: [],
      isCheckAll: false,
    };
  },
  created() {
    this.getCart();
  },
  methods: {
    del(id) {
      console.log("需要删除的商品id", id);
      delCartItem(id).then((res) => {
        console.log("删除成功?", res);
        this.getCart();
      });
    },
    changeNum(id, num) {
      updateCartItem({ id, num }).then((res) => {
        console.log("更新成功", res);
      });
      //   console.log(updateCartItem, id, num);
    },
    checkAll() {
      console.log(this.isCheckAll);
      if (this.isCheckAll) {
        this.cartList.forEach((el) => {
          el.checked = true;
        });
      } else {
        this.cartList.forEach((el) => {
          el.checked = false;
        });
      }
    },
    checkItem(index) {
      this.cartList[index].checked = !this.cartList[index].checked;
    },
    getCart() {
      getCartApi().then((res) => {
        //   this.cartList = res.data.result;
        let data = res.data.result.map((el) => {
          console.log(el);
          return {
            num: el.num,
            name: el.s_good.name,
            thumb: el.s_good.s_goods_photos[0].path,
            record_id: el.id,
            checked: false,
            price: el.s_good.sale_price,
          };
        });
        console.log("处理后的数据", data);
        this.cartList = data;
      });
    },
  },
  computed: {
    total() {
      return this.cartList.reduce((sum, el) => {
        return (sum += el.num * el.price);
      }, 0);
    },
  },
  watch: {
    cartList: {
      deep: true,
      handler(value) {
        if (value.length == 0) {
          this.isCheckAll = false;
        } else {
          // console.log(value);
          let isAllCheck = value.every((el) => el.checked);
          // console.log("是否全选", isAllCheck);
          this.isCheckAll = isAllCheck;
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.cart {
  padding: 0 10%;
  //   编译后的css
  //   .el-checkbox__inner[data-v-xxxxxx]
  //   样式穿透, 避免选择器被添加上 scoped 的随机自定义属性
  ::v-deep .el-checkbox__inner {
    width: 30px;
    height: 30px;
    &::after {
      width: 11px;
      height: 22px;
      left: 8px;
    }
  }
  .goods-box {
    .goods-item {
      border: 2px solid skyblue;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 5%;
    }
  }
}
</style>